<template>
  <div class="purchase-plan">
    <el-tabs v-model="currentName">
      <template v-for="item in tabs">
        <el-tab-pane :key="item.name" :label="item.label" :name="item.name">
          <template v-if="item.name === '1'">
            <drugWareHousing
              v-if="currentName == '1'"
              ref="drugWareHousing1" :type="1"
            ></drugWareHousing>
          </template>
          <template v-if="item.name === '2'">
            <drugWareHousing v-if="currentName == '2'" ref="drugWareHousing2" :type="0"></drugWareHousing>
          </template>
          <template v-if="item.name === '3'">
            <drugDelivery></drugDelivery>
          </template>
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>

<script>
import drugWareHousing from "../drugWareHousing/index";
import drugDelivery from "../drugDelivery/index";

export default {
  name: "purchasePlan",
  components: {
    drugWareHousing,
    drugDelivery
  },
  data() {
    return {
      currentName: null,
      tabs: []
    }
  },
  mounted() {
    this.createTabs();
    let type = this.$router.currentRoute.params.type;
    if(type) {
      this.currentName = type + "";
    }
  },
  methods: {
    createTabs() {
      if(this.checkPermission(['admin','cgjh:list'])) {
        this.tabs.push({
          label: "采购计划",
          name: "1"
        });
      }
      if(this.checkPermission(['admin','drugWareHousing:list'])) {
        this.tabs.push({
          label: "入库",
          name: "2"
        });
      }
      if(this.checkPermission(['admin','drugDelivery:list'])) {
        this.tabs.push({
          label: "出库",
          name: "3"
        });
      }
      this.currentName = this.tabs[0].name;
    },
    checkPermission(permissionRoles) {
      let roles = this.$store.getters && this.$store.getters.roles;
      let hasPermission = roles.some(role => {
        return permissionRoles.includes(role)
      });
      return hasPermission;
    }
  }
}
</script>

<style>
.purchase-plan .el-tabs__header{
  padding-left: 15px;
}
</style>